<template>
	<view>
		<view class="c-33 fs-32 bold" style="padding: 22rpx 30rpx;">请告知您的取消原因</view>
		<view class="fr-s-c" @click="cur = index" v-for="(item,index) in list" :key="index" style="padding: 22rpx 30rpx;">
			<text class="text-line-1 c-33 fs-28 bold flex-1">{{item.title}}</text>
			<image style="width: 38rpx; height: 38rpx;" v-if="cur!=index" :src="$path + '/login/ng.png'" mode=""></image>
			<image style="width: 38rpx; height: 38rpx;" v-else :src="$path + '/login/y.png'" mode=""></image>
		</view>
		<view class="fr-s-c" @click="cur=-1" style="padding: 22rpx 30rpx;">
			<text class="text-line-1 c-33 fs-28 bold flex-1">其他原因（填写）</text>
			<image style="width: 38rpx; height: 38rpx;" v-if="cur!=-1" :src="$path + '/login/ng.png'" mode=""></image>
			<image style="width: 38rpx; height: 38rpx;" v-else :src="$path + '/login/y.png'" mode=""></image>
		</view>
		<view class="w-1 p-r-30" v-if="cur==-1">
			<textarea class="mut w-1 p-30 fs-24" v-model="content" disable-default-padding placeholder="请描述"></textarea>
		</view>
		
		
		<view class="iphonex">
			<view class="w-1 p-30">
				<view class="big-btn" @click="sub">确认取消订单</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const id = ref(0)
	const list = ref([])
	const cur = ref(0)
	onLoad(o=>{
		id.value = o.id 
		getlist()
	})
	function getlist(){
		uni.$post({
			url:'/api/Ordersystem/ordercellationreason',
		}).then(res=>{
			list.value = res.data;
		})
	}
	
	const content = ref('')
	
	function sub(){
		if(cur.value==-1 && !content.value.trim().length) return uni.$u.toast('请输入取消原因');
		uni.$post({
			url: '/api/Ordersystem/tocourieronorder',
			data: {
				aid: id.value,
				type: 3,
				reason:cur.value==-1?content.value:list.value[cur.value].title,
				content:cur.value==-1?content.value:list.value[cur.value].title
			}
		}).then(res => {
			uni.$emit('red2')
			uni.$emit('reorder')
			uni.redirectTo({
				url:'/pagemaster/pages/index/SubSuccess'
			})
		})
	}
</script>

<style>
.tbox{
	width: 750rpx;
	height: 80rpx;
	background: #FFEFE5;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
}
.mut{
	height: 192rpx;
	background: #F3F3F3;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
}
</style>
